<template>
	<view class="">
		<view class="header_background">
			<image src="../../static/images/bl.png" mode=""></image>
		</view>
		<view class="userMessage">
			<view class="common_block">
				<view style="padding: 0 30upx;">
					<view class="flex_layout">
						<view class="left_img">
							<image :src="user.avatar?user.avatar:'../../static/images/user.png'" mode=""></image>
							<view class="sexImg">
								<image src="../../static/images/sex1.png" mode=""></image>
							</view>
						</view>
						<view class="right_text">
							<view class="">{{user.nickname?user.nickname:'未登录'}}</view>
							<text>{{user.bio?user.bio:'这个人很懒，什么也没写'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="appointment">
			
			<view class="appointment_item" v-if="isClinicShow">

				<block v-if="myCouponDetails.statusdata==0">
					<view class="appointment_title flex_layout">
						<view class="left_title">有效期：{{myCouponDetails.begintime}}至{{myCouponDetails.endtime}}</view>
						<view class="right_title flex_layout">
							<text class="dai"></text>
							未使用
						</view>
					</view>
				</block>
				
		    <view class="appointment_title">
					<view class="content_title">{{myCouponDetails.coupon_category_id.nametext}}</view>
					<view class="moneyNum">￥{{myCouponDetails.coupon_category_id.pricenumber}}</view>
					<view class="content_message">
						<image src="../../static/images/date.png" mode=""></image>
						<text>{{myCouponDetails.begintime}}至{{myCouponDetails.endtime}}</text>
					</view>
					<view class="appointment_info">
						<view v-html="myCouponDetails.coupon_category_id.descriptioncontent"></view>
						
					</view>
				</view>
				
				
				<view class="appointment_content" v-if="myCouponDetails.statusdata!=0">
					<view class="content_title">{{myCouponDetails.clinic_detail.name}}</view>
					<view class="content_message flex_layout">
						<view class="flex_layout">
							<image src="../../static/images/address.png" mode=""></image>
							<text>{{myCouponDetails.clinic_detail.addresstext}}</text>
						</view>
					</view>
					<view class="content_message">
						<image src="../../static/images/phone.png" mode=""></image>
						<text>{{myCouponDetails.clinic_detail.phonetext}}</text>
					</view>
				</view>
				
				
				
				<view class="coupon_content">
					<view class="coupon">
						<view class="coupon_title">优惠券验证二维码</view>
						<view class="coupon_img"><image :src="myCouponDetails.qrcodeimage" mode=""></image></view>
						<view class="coupon_cue"  v-if="myCouponDetails.statusdata==1">请将优惠券验证码交于门店验证后方可使用</view>
					</view>
				</view>
				
				<view class="coupon_content">
					<view class="coupon">
						<view class="coupon_title">优惠券编号</view>
						<view class="flex_layout use_message">
							<view class="use_num">{{myCouponDetails.number}}</view>
							<view class="use_img" v-if="myCouponDetails.statusdata==2"><image src="../../static/images/use.png" mode=""></image></view>
						</view>
					</view>
				</view>
				
				
			</view>

		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
			 user: this.$common.userInfo(),	
			 myCouponDetails:{
				 appointmenttime:'',
				 begintime:'',
				 qrcodeimage:'',
				 number:'',
				 coupon_category_id:{
					nametext:'',
					endtime:'',
					descriptioncontent:'',
					pricenumber:'',
					 
				 },
				 clinic_detail:{
					name:'',
					addresstext:'',
					phonetext:'', 
				 } 
			 },
			 isClinicShow:false
			}
		},
		onLoad(options) {
			var that=this;
			if(options.id){
				this.id=options.id;
				that.getMyCouponDetails();
			}else{
				this.$common.errorToShow('参数错误',function(){
					that.$common.navigateBack();
				})
			}
		},
		mounted() {
			_this= this;
		},
		onShow() {
			this.user = this.$common.userInfo();
			if (this.user) {
				if(!this.user.mobile){
					this.$common.navigateTo('/pages/user/bind');
				}else{
					this.$common.refreshUser(res => {
						if(this.user.avatar.indexOf("data:") != -1){
							var cavatar='/images/user.png';
							this.user.avatar=cavatar;
						}
					})
				}
				
			}else{
				this.$common.toLogin();
			}
		},
		methods: {
			//获取优惠券具体数据
			getMyCouponDetails:function(){
				var that=this;
				var id=that.id;
				this.$api.getCouponDetails(
				    {id:that.id},
					res => {
						if (res.code == 1) {
							this.isClinicShow=true;
							that.myCouponDetails=res.data
						}
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000
							})
							// setTimeout(function(){
							// 	uni.navigateBack()
							// },2000)
							
						}
					}
				)
			},
			qrcode: function(){
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
				    }
				});
			},
			edit: function(){
				uni.navigateTo({
					url:'edit'
				})
			}
		}
	}	
</script>

<style>
	@import url('../../common/common.css');
	page{background: #f8f8f8;}
	.flex_layout{display: flex; align-items: center; flex-wrap: wrap;}
	.header_background{position: relative; width: 100%; height: 220upx; background: #2562a1; z-index: -1;}
	.header_background image{position: absolute; display: block; left: 0; bottom: 0; height: 70upx; width: 100%;}
	.userMessage{width: 690upx; margin: -160upx auto 0;}
	.common_block{background: #fff; border-radius: 10px; padding: 45upx 0; margin-bottom: 20upx;}
	.left_img{position: relative; width: 114upx; height: 114upx;}
	.left_img>image{display: block; width: 114upx; height: 114upx; border-radius: 50%;}
	.sexImg{position: absolute; bottom: 10upx; right: 0; height: 30upx; width: 48upx; border-radius: 30upx; background: #2562a1; display: flex; align-items: center; justify-content: center;}
	.sexImg image{display: block; width: 20upx; height: 21upx;}
	.right_text{padding-left: 30upx;}
	.right_text view{color: #333333; font-size: 30upx;}
	.right_text text{color: #999; font-size: 24upx; margin-top: 20upx; display: block;}
	
	.appointment{padding: 0 30upx;}
	.appointment_item{background: #fff; border-radius: 10px; margin-top: 30upx;}
	.appointment_title{justify-content: space-between; padding: 20upx 30upx; border-bottom: 1px solid #f8f8f8;}
	.left_title{color: #999; font-size: 24upx;}
	.right_title{color: #999; font-size: 24upx;}
	.right_title view{color: #2562a1; font-size: 24upx; display: flex; align-items: center; justify-content: center; width: 90upx; height: 45upx; border-radius: 10px 0 10px 0; background: #e8f3ff;}
	.right_title view.use{color: #999;background: #f7f7f7}
	
	.appointment_content{padding: 40upx 30upx;}
	.content_title{color: #333; font-size: 36upx; font-weight: bolder;}
	.content_message{margin-top: 20upx;}
	.content_message image{width: 24upx; height: 24upx;}
	.content_message text{color: #999; font-size: 24upx; margin-left: 20upx;}
	.moneyNum{color: #f44141; font-size: 36upx; margin-top: 30upx;}
	
	.Booking_time{color: #2562a1; font-size: 30upx;}
	.coupon_content{padding: 0 30upx;}
	.coupon{padding: 40upx 0; border-top: 1px solid #f8f8f8;}
	.coupon_title{color: #333; font-size: 30upx;}
	.coupon_img{margin: 40upx 0;}
	.coupon_img image{display: block; margin: 0 auto; width: 240upx; height: 240upx;}
	.coupon_cue{color: #999; font-size: 24upx; text-align: center;}
	.use_message{justify-content: space-between; margin-top: 20upx;}
	.use_num{color: #999999; font-size: 30upx;}
	.use_img image{width: 108upx; height: 108upx;}
	.appointment_info{ background: #e8f3ff; padding: 30upx; line-height: 1.5; color: #2562a1; font-size: 24upx; margin-top:  20upx;}
	
	
	/* .appointment_title{justify-content: space-between; padding: 20upx 30upx; border-bottom: 1px solid #f8f8f8;}
	.left_title{color: #999; font-size: 24upx;}
	.right_title{color: #999; font-size: 24upx;}
	.right_title text{display: inline-block; margin-right: 10upx;}
	.right_title text.dai{border: 2upx solid #1a67b8; width: 10upx; height: 10upx; border-radius: 10upx; }
	.right_title text.yi{background: #1a67b8; width: 14upx; height: 14upx; border-radius: 14upx; color: ##1a67b8;}
	.right_title text.wan{background: #ccc;border: 2upx solid #ccc; width: 10upx; height: 10upx; border-radius: 10upx; } */
</style>
